<template>
	<view>
		<u-navbar title="发表评价" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="topV">
			<view class="titletv">描述相符</view>
			<uni-rate activeColor="#CEF743" color="#4A4A4A" size="20" margin="4" :isFill="false" v-model="miaoshu">
			</uni-rate>
		</view>
		<view class="txtV">
			<textarea v-model="txt" placeholder="展开说说你对产品的想法吧"></textarea>
		</view>

		<view class="nimingV" @click="selete = !selete">
			<image :src="selete?'../../static/select_.svg':'../../static/select.svg'"></image>
			<view>是否匿名</view>
		</view>
		<view class="nimingTv">开启匿名后，你写的评价将以匿名形式展现</view>

		<view class="sendTv" @click="onSendClick()">发布</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				item: null,
				miaoshu: 5,
				selete:false,
				txt:'',
				orderId:'',
			}
		},
		onLoad(e) {
			this.item = JSON.parse(e.item);
			// console.log("----",JSON.stringify(e))
			this.orderId = e.orderId;
		},
		methods: {
			onSendClick(){
				if(this.txt.length==0){
					uni.$u.toast("请输入描述");
					return
				}
				
				uni.showLoading();
				this.$api.getShoOrderEvaluate({
					product_id:this.item.id,
					order_id:this.orderId,
					rate:this.miaoshu,
					anonymous:this.selete?"1":"0",
					comment:this.txt
				}).then((res) => {
					uni.hideLoading();
					uni.$u.toast("评价成功");
					setTimeout(() => {
						uni.navigateBack();
					}, 900)
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast("评价失败");
				})
			}
		}
	}
</script>

<style lang="scss">
	.topV {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.titletv {
		font-size: 28rpx;
		color: #F9F9F9;
	}

	.txtV {
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		textarea {
			color: #fff;
		}
	}

	.nimingV {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		view {
			font-size: 32rpx;
			margin-left: 10rpx;
			color: #8D8D8D;
		}
	}

	.nimingTv {
		margin-top: 3rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
		color: #545454;
	}

	.sendTv {
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: 100rpx;
		margin-top: 60rpx;
		background: #E6A5B4;
		border-radius: 50rpx;
		font-size: 32rpx;
		color: #333737;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
